<template>
  <div class="g-panel-fixed" v-if="value">
    <w-form-validate @on-validate="onConfirm">
      <div class="mask" @click.stop="onCancel"></div>
      <div class="m-panel-wrap" :style="{width: width, height: height, 'border-radius': `${radius}px`}">
        <!-- 标题 -->
        <w-panel-title class="clearfix">
          <h3 class="fl">{{title}}</h3>
          <div v-if="showClose" class="panel-close fr" @click="onCancel">
            <img src="../../assets/close.png" alt="">
          </div>
          <slot name="title"></slot> 
        </w-panel-title>
        <!-- <div class="panel-title clearfix" v-if="panelTitle">
          <span>{{title}}</span>
          <div v-if="showClose" class="panel-close fr" @click="onCancel">
            <img src="../../assets/close.png" alt="">
          </div>
        </div> -->
        <!-- 内容区域 -->
        <div class="panel-scroll">
          <!-- 内容 -->
          <div class="panel clearfix">
            <slot></slot>
          </div>
        </div>
        <!-- 确认和取消按钮 -->
        <div class="btn-group">
          <button type="close" class="btn default" @click.prevent="onCancel">关闭</button>
          <button type="submit" class="btn main">{{confirmText}}</button>
        </div>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
export default {
  props: {
    showClose: [Boolean], // 是否展示删除按钮
    // 控制显示
    value: [Boolean],
    // 控制是否展示标题
    panelTitle: {
      type: Boolean,
      default: false
    },
    // 标题文字
    title: {
      type: String,
      default: ''
    },
    // 宽度
    width: {
      type: String,
      default: '580px'
    },
    // 高度
    height: {
      type: String,
      default: '340px'
    },
    // 圆角大小
    radius: {
      type: [String, Number],
      default: 5
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: '确认'
    }
  },
  methods: {
    onCancel() {
      this.$emit('on-cancel')
      this.$emit('input', false)
    },
    onConfirm() {
      this.$emit('on-confirm')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../scss/_panel.scss';
@import '../../scss/_var.scss';
</style>